<template>
  <div class="q-pa-md">
    <el-col :span="12">
    <el-input placeholder="请输入视频地址" v-model="urlData"  clearable />
    </el-col>
    <el-select v-model="parseUrl" placeholder="请选择">
      <el-option
        v-for="item in urlList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <q-video
      :ratio="16/9"
      :src="url"
    />
  </div>
</template>

<script>
export default {
  name: 'video',
  data() {
    return {
      url: '',
      urlData: '',
      parseUrl: 'http://17kyun.com/api.php?url=',
      urlList: [
        { label: '线路一', value: 'https://jx.618g.com/?url=' },
        { label: '线路二', value: 'http://17kyun.com/api.php?url=' },
        { label: '线路三', value: 'http://jx.598110.com/zuida.php?url=' },
        { label: '线路四', value: 'http://www.freeget.org/jx.php?url=' },
        { label: '线路五', value: 'http://at520.cn/jx/?url=' }
      ]
    }
  },
  created() {
    this.url = this.parseUrl + 'https://www.bilibili.com/video/BV1Rq4y1u7Vx?spm_id_from=333.851.b_7265636f6d6d656e64.10'
  },
  watch: {
    urlData: {
      handler() {
        this.url = this.parseUrl + this.urlData
      }
    },
    parseUrl: {
      handler() {
        this.url = this.parseUrl + this.urlData
      }
    }
  }
}
</script>

<style scoped>
</style>
